<template>
  <div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#333"
      class="el-menu-vertical-demo"
      default-active="0"
      text-color="#fff"
      @open="firstTimeData"
      >
      <el-menu-item></el-menu-item>
      <el-sub-menu index="1">
          <template #title>
            <span>Navigator One</span>
          </template>
          <template v-for="(v, k) in flowers" :key="k">   
            <el-menu-item :index="String(k)" @click="handleOpen(v)">{{ v.lauraceae }}</el-menu-item>
          </template>
        </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
  import {request} from '../network/request';
  import {ref, computed} from 'vue';

export default {
  setup (props, ctx) {
    const flowers = ref([]);

    request({
      // url: '/api/flower/flowerTitle',
      url: '/flower/flowerTitle',
      params: {
        type: 0
      }
    }).then(res => {
      // console.log(res);
      // for (let i in res) {
        // console.log(res[i]);
      // }
      flowers.value = res;
    }).catch(err => {
      console.log(err);
    })

    //   {
    //     title: '花卉管理',
    //     list: [
    //       {id: 3, name: '蔷薇科'},
    //       {id: 2, name: '唇形科'},
    //       {id: 1, name: '百合科'}
    //     ]
    //   },
    //   {
    //     title: '树种管理',
    //     list: [
    //       {id: 4, name: '银杏'},
    //       {id: 5, name: '桃树'},
    //       {id: 6, name: '桂花树'}
    //     ]
    //   },
    
    const firstTimeData = () => {
      ctx.emit("pushTypeValue", flowers.value[0]);
    }
    
    const handleOpen = value => {
      ctx.emit("pushTypeValue", value);
    }

    return {
      flowers,
      firstTimeData,
      handleOpen
    }
  }
}
</script>

<style scoped>
  .el-menu{
    height: 100vh
}
</style>